<template>
  <div>
    <el-divider>基本信息</el-divider>
    <div class="dialog_left children">
      <!-- <div>
            <el-image :src="form.image" class="dialog_left_image">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div> -->
      <div>
        <el-descriptions direction="vertical" :column="4" border>
          <el-descriptions-item label="编号">{{ form.equipmentRepairNum || '-' }}</el-descriptions-item>
          <el-descriptions-item label="设备编号">{{ form.eaPartInfoVo ? form.eaPartInfoVo.equipmentNum : '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="设备名称">{{ form.eaPartInfoVo ? form.eaPartInfoVo.equipmentName : '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <div :style="'color:' + ['#E6A23C', '#67C23A', '#F56C6C'][form.status]">
              <i :class="['el-icon-warning', 'el-icon-success', 'el-icon-remove'][form.status]" />
              <span>
                {{ ['未处理', '已处理', '已消除'][form.status] }}
              </span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="消除时间">{{ form.removeTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="关联巡检编号">{{ form.patrolNum || '-' }} </el-descriptions-item>
          <el-descriptions-item label="关联维修工单">{{ form.repairNum || '-' }} </el-descriptions-item>
          <el-descriptions-item label="创建人">{{ form.createBy || '-' }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ form.createTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="异常项" :span="2">{{ form.abnormalProjectName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="描述" :span="2">{{ form.describe || '-' }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="4">{{ form.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-divider>图片信息</el-divider>
    <div class="image_flex">
      <Image-preview v-for="(item, i) in form.equipmentRepairImages" style="margin-left:20px" :key="i" :src="item.image"
        width="120px" height='120px'></Image-preview>
    </div>
    <!-- -----------------------------------------------------视频信息-------------------------------------------------------------- -->
    <el-divider>视频信息</el-divider>
    <!-- <Video-detail :src="form.video"></Video-detail> -->
    <div class="image_flex">
      <video v-if="form.video" :src="form.video" width="390" height="200" style="background-color: black"
        controls="controls">
        您的浏览器不支持视频播放
      </video>
      <div v-else style="color:#ccc;font-size:14px;padding:20px">暂无视频信息</div>
    </div>
  </div>
</template>

<script>
import { listDetail, listEquipment, listMaterial } from '@/api/maintenance/management/equipmentAssembly.js'
export default {
  name: 'detailed',
  props: {
    parentid: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      form: {},//基本信息
      EquipmentList: [],//相关设备
      MaterialList: []//相关物料
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      const { data: res } = await listDetail(this.parentid);
      console.log(res);
      this.form = res
    },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;
}

.image_flex {
  display: flex;
  justify-content: center;
}

// .dialog_left>div:nth-child(1){
//   flex:1
// }
.dialog_left>div:nth-child(2) {
  flex: 10;
  margin-left: 10px
}

/* el-descriptions-item 文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
</style>